<template>
  <svg :class="[svgClass,defaultClass]" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'svgIcon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String
      },
      size: {
        type: String,
        default: 'normal'
      },

    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      },
      defaultClass () {
             if (this.iconClass === 'breakfast')    {return 'breakfast'}
        else if (this.iconClass === 'reading')      {return 'reading'}
        else if (this.iconClass === 'java')         {return 'java'}
        else if (this.iconClass === 'ui_design')    {return 'ui_design'}
        else if (this.iconClass === 'biker')        {return 'biker'}
        else if (this.iconClass === 'coding')       {return 'coding'}
        else if (this.iconClass === 'design')       {return 'design'}
        else if (this.iconClass === 'family')       {return 'family'}
        else if (this.iconClass === 'gaming')       {return 'gaming'}
        else if (this.iconClass === 'learning')     {return 'learning'}
        else if (this.iconClass === 'social')       {return 'social'}
        else if (this.iconClass === 'sport')        {return 'sport'}
        else if (this.iconClass === 'sport-indoor') {return 'sport-indoor'}
        else if (this.iconClass === 'biker')        {return 'biker'}
        else if (this.iconClass === 'work')         {return 'work'}
        else {
          return ''
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .svg-icon {
    fill: currentColor;
    overflow: hidden;
  }

  .breakfast    {width: 190px;margin:-10px -10px 0 0;}
  .reading      {width: 170px;margin:0 -5px 0 0;}
  .java         {width: 190px;margin:0 -10px 0 0;}
  .ui_design    {width: 190px;margin:0 -10px 0 0;}
  .biker        {width: 190px;margin:0 -10px 0 0;}
  .coding       {width: 170px;margin:0 -5px 0 0;}
  .design       {width: 170px;margin:-20px 0 0 0;}
  .family       {width: 180px;margin:-15px -5px 0 0;}
  .gaming       {width: 180px;margin:0 0 0 0;}
  .learning     {width: 180px;margin:0 -14px 0 0;}
  .social       {width: 180px;margin:-15px -10px 0 0;}
  .sport        {width: 210px;margin: 0 -15px 0 0;}
  .sport-indoor {width: 160px;margin: 0 5px 0 0;}
  .work         {width: 180px;margin:-5px -10px 0 0;}

</style>

